﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/Master.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="UI.Admin.Content.ModelOfficeFile.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link rel="stylesheet" href="/Admin/assets/css/jquery-ui-1.10.3.full.min.css" />
    <link rel="stylesheet" href="/Admin/Uploadify/uploadify.css" />
    <script src="/Admin/Uploadify/jquery-1.9.1.min.js"></script>
     <script src="/Admin/Uploadify/jquery.uploadify.js"></script>
    <script type="text/javascript" src="Uploadify.file.js"></script>
    <script type="text/javascript" src="JsFunction.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     
     <div class="row">
	    <div class="col-xs-12">           		    
                <h3 class="header smaller lighter blue">
	          <span id="columnName"><%=BLL.Find.FindOneColumn(ColumnID).Name %></span>  
	                <small>
		                  <i class="icon-double-angle-right"></i>
		                文件列表
	                </small>
                    &nbsp;&nbsp;&nbsp;&nbsp;<a class="btn btn-primary btn-sm" href="#modal-form" role="button"  data-toggle="modal" onclick="clearContent()"><i class="icon-plus"></i>添加文件</a>
                </h3>  
            <div id="test"></div>            
             <div class="table-header badge-primary">
			    表的每一个列名都可以作为排序的关键字，点击小三角形进行排序操作
		    </div>
		    <div class="table-responsive">
			    <table id="sample-table-2" class="table table-striped  table-hover">
				    <thead class="">
					    <tr>
						 
						    <th>ID</th>
                            <th>文件名称</th>				
						    <th>文件类型</th>
						    <th>文件大小</th>
						    <th>上传者</th> 
                             <th>上传时间</th>                        
						    <th></th>
					    </tr>
				    </thead>

				    <tbody>
                  
                   <%for(int i=0;i<list.Count;i++){ %>
					    <tr>						               
						    <td><%=list[i].ID %></td>
						    <td><%=list[i].FileName %></td>
						    <td><%=list[i].FileType %></td>
						    <td><%=list[i].FileSize %></td>
						    <td><%=list[i].FileEditor %></td>
                            <td><%=list[i].UploadTime %></td>
						    <td>
							    <div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">
							

								    <a class="green" role="button"  data-toggle="modal" href="#modal-form" onclick="fixedContent('<%=list[i].ID%>','<%=list[i].FileName %>','<%=list[i].FileUrl %>','<%=list[i].UploadSource %>')">
									    <i class="icon-pencil bigger-130"></i>
								    </a>

								    <a class="red" href="javascript:void(0)" onclick="submit_delete_officefile(<%=list[i].ID %>)" >
									    <i class="icon-trash bigger-130"></i>
								    </a>
							    </div>
						    </td>
					    </tr>
                         
      <%} %>
				    </tbody>
			    </table>
		    </div>
	    </div>
    </div>
    
	<div id="modal-form" class="modal" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">&times;</button>
					<h4 class="blue bigger">请根据提示信息填写表单</h4>
				</div>

				<div class="modal-body overflow-visible">
					<div class="row">
						
						<div class="col-xs-12">
										
							<div class="form-group">
								<label for="form-field-first" class="col-sm-3 text-right">文件名称：</label>

								<div class="col-sm-9">
									<input type="text" class="col-sm-10 padding-20" placeholder="必填" id="FileName"/>									
								</div>
                                
							</div>
                            <div class="clearfix"></div>
							<div class="space-8"></div>
                             <div class="form-group">
								<label for="form-field-first" class="col-sm-3 text-right">文件路径：</label>

								<div class="col-sm-9">
									<input type="text" class="col-sm-7" placeholder="必填" id="FileUrl"/>
                                     <span class="orange">&nbsp;&nbsp;*上传或输入</span>																	     
                                </div>                               
							</div>
                             <div class="clearfix"></div>
							<div class="space-4"></div>
                              <div class="form-group">
                                 
                                  <label for="form-field-first" class="col-sm-3 text-right"></label>
                                  <div class="col-sm-9"><button id="uploadify_div"></button></div> 
                              </div>
                           
                             <div class="clearfix"></div>
							<div class="space-2"></div>
                             <div class="form-group">
								<label for="form-field-first" class="col-sm-3 text-right">文件来源：</label>

								<div class="col-sm-9">
									<input type="text" class="col-sm-7" id="UploadSource"/>
                                     <span class="orange">&nbsp;&nbsp;*此信息可为空</span>																	     
                                </div>                               
							</div>
                              <div class="clearfix"></div>
                            <div class="space-4"></div>
                 
                              <div class="form-group">
                                 
                                  <label for="form-field-first" class="col-sm-3 text-right"></label>                           
                              </div>                       
                            <input type="hidden" value="" id="OFID"/>
						</div>
					</div>
				</div>

				<div class="modal-footer">
                  <span class='green' hidden="hidden">*提交成功</span><span class='red' hidden="hidden">*操作失败,文件名称和文件路径为必填项！</span>  &nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-sm btn-primary" onclick="submit_edit_content()" id="save">
						<i class="icon-ok"></i>
						保存
					</button>

					<button class="btn btn-sm" data-dismiss="modal">
						<i class="icon-remove"></i>
						取消
					</button>

					
				</div>
			</div>
		</div>
	</div><!-- PAGE CONTENT ENDS -->



     <div id="dialog-confirm" class="hide">
		<div class="alert alert-info bigger-110">
			删除操作执行后不可恢复
		</div>

		<div class="space-6"></div>

		<p class="bigger-110 bolder center grey">
			<i class="icon-hand-right blue bigger-120"></i>
			Are you sure?
		</p>
	</div><!-- #dialog-confirm -->
     <input type="hidden" id="ColumnID" value="<%=ColumnID %>" />
    <input type="hidden" id="FileType" value="" />
    <input type="hidden" id="FileSize" value="" />

</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
     <script src="/Admin/assets/js/jquery.dataTables.min.js" charset="GB2312"></script>
	<script src="/Admin/assets/js/jquery.dataTables.bootstrap.js" charset="GB2312"></script>
    <script src="/Admin/assets/js/jquery-ui-1.10.3.full.min.js"></script>
	<script src="/Admin/assets/js/jquery.ui.touch-punch.min.js"></script>

    <script type="text/javascript">
        jQuery(function ($) {
            var oTable1 = $('#sample-table-2').dataTable({
                "aoColumns": [

			      null, null, null, null, null, null,
				  { "bSortable": false }
                ]
            });


            $('table th input:checkbox').on('click', function () {
                var that = this;
                $(this).closest('table').find('tr > td:first-child input:checkbox')
                .each(function () {
                    this.checked = that.checked;
                    $(this).closest('tr').toggleClass('selected');
                });

            });


            $('[data-rel="tooltip"]').tooltip({ placement: tooltip_placement });
            function tooltip_placement(context, source) {
                var $source = $(source);
                var $parent = $source.closest('table')
                var off1 = $parent.offset();
                var w1 = $parent.width();

                var off2 = $source.offset();
                var w2 = $source.width();

                if (parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2)) return 'right';
                return 'left';
            }

        })
        $.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
            _title: function (title) {
                var $title = this.options.title || '&nbsp;'
                if (("title_html" in this.options) && this.options.title_html == true)
                    title.html($title);
                else title.text($title);
            }
        }));




        //chosen plugin inside a modal will have a zero width because the select element is originally hidden
        //and its width cannot be determined.
        //so we set the width after modal is show
        $('#modal-form').on('shown.bs.modal', function () {
            $(this).find('.chosen-container').each(function () {
                $(this).find('a:first-child').css('width', '210px');
                $(this).find('.chosen-drop').css('width', '210px');
                $(this).find('.chosen-search input').css('width', '200px');
            });
        })
        /**
        //or you can activate the chosen plugin after modal is shown
        //this way select element becomes visible with dimensions and chosen works as expected
        $('#modal-form').on('shown', function () {
            $(this).find('.modal-chosen').chosen();
        })
        */


    </script>
</asp:Content>
